<template>
<div>
  <el-form :inline="true" style="text-align: left" ref="query" :model="list">
    <el-row class="query">
      <el-form-item label="关键字:">
        <el-input
            placeholder="姓名,身份证号"
            v-model="searchKeyword"
        >
        </el-input>
      </el-form-item>
      <el-button type="danger" @click="clearfun">清空</el-button>
      <el-button
          type="primary"
          @click="search"
      >搜索
      </el-button>
    </el-row>
  </el-form>
  <div style="text-align: left">
    <el-button
        @click="accounting"
        v-no-more-click
        size="small"
        type="primary"
    >核算
    </el-button>
    <el-button
        @click="orderExport"
        v-no-more-click
        icon="el-icon-circle-plus-outline"
        size="small"
        type="primary"
    >导出
    </el-button>
  </div>
  <el-table :data="tableData" border style="width: 100%;margin-top: 2%">
    <el-table-column prop="signName" label="姓名" :show-overflow-tooltip="true" />
    <el-table-column
        prop="idCard"
        label="身份证号"
        :show-overflow-tooltip="true"
    />
    <el-table-column
        prop="contractNum"
        label="执行合同号"
        :show-overflow-tooltip="true"
    />
    <el-table-column
        prop="belongName"
        label="归属经纪人"
        :show-overflow-tooltip="true"
    />
    <el-table-column
        prop="channelName"
        label="归属渠道客服"
        :show-overflow-tooltip="true"
    />
    <el-table-column
        prop="answerAmount"
        label="应还总额"
        :show-overflow-tooltip="true"
    />

    <el-table-column
        prop="answerMonth"
        label="应还月"
        :show-overflow-tooltip="true"
    />
    <el-table-column
        prop="answerDay"
        label="应还日"
        :show-overflow-tooltip="true"
    />
    <el-table-column
        prop="actualMonth"
        label="实还月"
        :show-overflow-tooltip="true"
    />
    <el-table-column
        prop="actualDay"
        label="实还日"
        :show-overflow-tooltip="true"
    />
    <el-table-column
        prop="overdueStatus"
        label="是否逾期"
        :show-overflow-tooltip="true"
    />
    <el-table-column
        prop="withHoldStatus"
        label="扣款状态"
        :show-overflow-tooltip="true"
    />
    <el-table-column
        label="代扣通道"
        :show-overflow-tooltip="true"
    >
      <template slot-scope="scope">
        <span v-if="scope.row.withHoldType == 0">银联</span>
        <span v-if="scope.row.withHoldType == 1">银盛</span>
      </template>
    </el-table-column>
    <el-table-column
        prop="withHoldCode"
        label="银联扣款码"
        :show-overflow-tooltip="true"
    />
    <el-table-column
        prop="yseOutTradeNo"
        label="银盛扣款码"
        :show-overflow-tooltip="true"
    />
    <el-table-column
        prop="withHoldAmount"
        label="实扣总额"
        :show-overflow-tooltip="true"
    />

    <el-table-column
        prop="applyPerson"
        label="申请扣款人"
        :show-overflow-tooltip="true"
    />
    <el-table-column
        prop="actualTime"
        label="实际扣款时间"
        :show-overflow-tooltip="true"
    />
    <el-table-column
        prop="commissionStatus"
        label="是否计算提成"
        :show-overflow-tooltip="true"
    />
    <el-table-column
        prop="achievementStatus"
        label="是否计算业绩"
        :show-overflow-tooltip="true"
    />
  </el-table>
  <p class="content">
    小计，总共{{ perInfo.nums || 0 }}期，总应还￥{{
      perInfo.shouldAmount || 0
    }}。已结清{{ perInfo.settles || 0 }}期，已还总额￥{{
      perInfo.repaidAmount || 0
    }}（银联￥{{perInfo.unionAmount}},银盛￥{{perInfo.yseAmount}}）。
  </p>
  <div class="pagination">
    <span class="title">小计：共{{ this.total }}条数据</span>
    <el-pagination
        background
        layout="total,prev, pager, next, sizes"
        :total="total"
        :page-size="list.pageSize"
        :current-page.sync="list.pageNum"
        :page-sizes="[10, 20, 30, 40]"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
    >
    </el-pagination>
  </div>
</div>
</template>

<script>
import {getOverdueDeductionDetails, getRollupOverdue, overdveAccounting} from "@/assets/js/api";
import {expotOut} from "@/assets/js/utlis";

export default {
  name: "OverdueRecordDetail",
  // comments:{getOverdueDeductionDetails,getRollupOverdue},
  props: {
    month: {
      type: String,
    },
  },
  data() {
    return{
      list:{
        answerMonth:'',
        executeMonth:null,
        keyword:null,
        pageNum:'1',
        pageSize:10
      },
      tableData:[],
      perInfo: {},
      total:1,
      pages:1,
      fileParmas: {},
      searchKeyword:null

    }
  },
  created() {
    this.list.answerMonth = this.month;

    this.clearfun();
    this.getSubtotal();
  },
  // watch:{
  //   month(){
  //     this.list.answerMonth = this.month;
  //     // this.searchKeyword = ''
  //     this.getList();
  //   }
  // },
  methods:{
    getList(){
      getOverdueDeductionDetails(this.list).then((res) =>{
          if (res.code == 200) {
            // this.list.answerMonth = this.executeTime;
            this.tableData = res.data.records;
            this.total = res.data.total;
            this.pages = res.data.current;
          }
      })
    },
    // 小计统计
    getSubtotal() {
      getRollupOverdue(this.month).then((res) => {
        if (res.code == 200) {
          this.perInfo = res.data;
        } else {
          this.$message.error(res.message);
        }
      });
    },
    //分页
    handleCurrentChange(cpage) {
      this.list.pageNum = cpage;
      this.getList();
    },
    handleSizeChange(psize) {
      this.list.pageSize = psize;
      this.getList();
    },
    //导出
    orderExport() {
      this.fileParmas.answerMonth = this.month
      this.fileParmas.keyword = this.list.keyword
      expotOut(
          "POST",
          "/business/sign/exportOverdueDetails",
          this.fileParmas, // 导出请求参数
          "逾期扣款记录明细表" // 导出文件名字
      );
    },
    //核算
    accounting() {
      // var currentMonth = ;
      overdveAccounting(this.list.answerMonth).then((res) => {
        var msg = res.message;
        if (res.code == 200) {
          this.$message({ message: msg, type: "success" });
        } else {
          this.$message({ message: msg, type: "error" });
        }
      });
    },
    //清空
    clearfun(){
      this.pages = 1;
      this.list.keyword = '';
      this.searchKeyword = null;
      this.list.pageNum = 1
      this.getList();
    },
    //搜索
    search(){
      this.list.keyword = this.searchKeyword
      this.list.pageNum = 1
      this.getList();
    }
  }
}
</script>

<style scoped>
.query {
  position: relative;
}
.title
{
  font-family: Microsoft YaHei;  font-weight: 400;  line-height: 21px;  position: absolute;  left: 0;  margin-top: 15px;  color: rgba(51, 51, 51, 1);
}
</style>